<template>
	<div>
		<el-button type="primary" @click="dialogVisible = true">+新增</el-button>
		<el-dialog title="新增数据"  :visible.sync="dialogVisible"  width="80%">
		  <el-form  :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
		    <el-form-item label="姓名" prop="name">
		      <el-col :span="11">
				  <el-input v-model="ruleForm.name"></el-input>
			  </el-col>
		    </el-form-item>
			
			<el-form-item label="图片" prop="image" ref="uploadElement">
			  <el-col :span="11">
				  <el-upload
				    class="upload-demo"
				    action="/api/add/news"
					ref="upload"
					:limit="1"
					:http-request='request'
					:before-upload="beforeUpload"
					:show-file-list="true"
					:on-change='handleChange'
					:data="ruleForm"
					:file-list="fileList"
					:auto-upload="false"
				    list-type="picture">
				    <el-button size="small" type="primary">点击上传</el-button>
				  </el-upload>
			  </el-col>
			</el-form-item>
			
		    <el-form-item label="时间" prop="date">
		      <el-col :span="11">
		        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date" style="width: 100%;"></el-date-picker>
		      </el-col>
		    </el-form-item>
			
			<el-form-item label="标题" prop="title">
			  <el-col :span="11">
			    <el-input v-model="ruleForm.title"></el-input>
				</el-col>
			</el-form-item>
			
			<el-form-item label="内容" prop="content">
			  <el-col :span="11">
			    <el-input v-model="ruleForm.content"></el-input>
				</el-col>
			</el-form-item>
			<el-form-item >
			  <el-col :span="11">
			    <el-button @click="restFrom('ruleForm')">重置</el-button>
			    <el-button type="primary" @click="submit('ruleForm')">确 定</el-button>
				</el-col>
			</el-form-item>
			
		  </el-form>
		</el-dialog>
	</div>
</template>

<script>
  import {postMenu} from '@/api/data.js'
  export default {
    data() {
      return {
        dialogVisible: false,
		ruleForm:{
			name: '',
			date: '',
			content: '',
			image: '',
			title:''
		},
		fileList:[],
		rules:{
			name:[{required:true,message:'请输入名字',trigger:'blur'}],
			image:[],
			date:[],
			title:[],
			content:[]
		}
      };
    },
    methods: {
		beforeRemove(file, fileList) {
			return this.$confirm(`确定移除 ${ file.name }？`);
		},
		restFrom(val){
			this.$refs[val].resetFields();
			this.$refs.upload.clearFiles();
			this.ruleForm.fileList = [];
			this.ruleForm ={
				name: '',
				date: '',
				content: '',
				image: '',
				title:''
			};
		},
		//触发提交
		submit(val){
			const that = this;
			this.$refs[val].validate(valid=>{
				if(valid){
					that.$refs.upload.submit(that.ruleForm);
				}else{
					return false
				}
			})
			this.dialogVisible = false;
			this.$refs[val].resetFields();
			this.$refs.upload.clearFiles();
			this.ruleForm.image = '';
			this.ruleForm.fileList = [];
		},
		beforeUpload(file){
			let  res = URL.createObjectURL(file);
			this.ruleForm.image=res;
			return true
		},
		handleChange(file){},
		//真正的提交
		request(val){
			postMenu(val).then(res=>{
				//把数据传给表格
				this.$root.$emit('emit',res)
			})
		}
    },
  };
</script>

<style>
</style>
